<template>
  <div style="width: 100vw;height:100vh;overflow: hidden" class="flcc pos-r login">
    <div class="pos-a t0 l0 r0 b0 flcc trans shadow3" style="z-index: 100">
      <mu-paper :z-depth="15" class="ofh round5" :class="{show:showLogin,hide:!showLogin}">
        <div class="flex-r ofh round5" style="width: 800px;height: 500px;">
          <div class="flex1 bc13 round5">
            <div class="flcc pad10">
              <mu-icon value="home" color="primary" size="42"></mu-icon>
              <div>官网</div>
            </div>
            <div class="flcc pad10">
              <mu-icon value="phone" color="primary" size="42"></mu-icon>
              <div>电话</div>
            </div>
            <div class="flcc pad10">
              <mu-icon value="mail" color="primary" size="42"></mu-icon>
              <div>邮箱</div>
            </div>
            <div class="flcc pad10">
              <mu-icon value="chat" color="primary" size="42"></mu-icon>
              <div>留言</div>
            </div>
          </div>
          <div class="flex5 pad20">
            <h1>智慧云管理后台</h1>
            <h6 class="c12">智慧云管理后台</h6>
            <div>
              <mu-text-field v-model="username" label-float label="账号" help-text="请输入账号、手机或者邮箱" type="text"
                             full-width></mu-text-field>
            </div>
            <div>
              <mu-text-field v-model="password" label-float label="密码"
                             :action-icon="visibility ? 'visibility_off' : 'visibility'"
                             :action-click="() => (visibility = !visibility)"
                             :type="visibility ? 'text' : 'password'" full-width icon=""></mu-text-field>
            </div>
            <div>
              <mu-checkbox label="我已阅读《XXXXX》" v-model="read"></mu-checkbox>
            </div>
            <div class="mart30">
              <mu-button full-width color="primary" @click="login" round>登陆</mu-button>
            </div>
          </div>
          <div class="flex3 flcc cf round5" style="background: #0396ff">
            <h1>没有账号?</h1>
            <h4>联系管理员开通</h4>
            <div class="mart30">
              <mu-tooltip content="TEL:13054666607" placement="top">
                <mu-button icon fab>
                  <mu-icon value="phone"></mu-icon>
                </mu-button>
              </mu-tooltip>
            </div>
          </div>
        </div>
      </mu-paper>
    </div>
    <div class="pos-a t0 l0 r0 b0 flcc" style="z-index: 90">
      <div class="trans loading" :class="{show:!showLogin,hide:showLogin}">
        <EzLoading class="bcf mar3 round30" :done="prepare.info"><div class="pad5">加载基础数据</div></EzLoading>
        <EzLoading class="bcf mar3 round30" :done="prepare.model"><div class="pad5">加载模块数据</div></EzLoading>
        <EzLoading class="bcf mar3 round30" :done="prepare.page"><div class="pad5">加载页面权限</div></EzLoading>
        <EzLoading class="bcf mar3 round30" :done="prepare.menu"><div class="pad5">加载菜单权限</div></EzLoading>
        <EzLoading class="bcf mar3 round30" :done="prepare.custom"><div class="pad5">加载偏好设置</div></EzLoading>
      </div>
    </div>
    <vue-particles :move-speed="2" color="#FFFFFF" linesColor="#FFFFFF" style="width: 100vw;height:100vh;z-index: 1;" class="pos-a l-9 r0 t-9 b0"></vue-particles>
    <div class="background">&nbsp;</div>
  </div>
</template>

<script>
import EzLoading from "@/comps/login/EzLoading";
export default {
  name: "ez-login",
  components: {EzLoading},
  data() {
    return {
      visibility: false,
      username: "",
      password: "",
      read: true,
      showLogin: true,
      redirect:"/index",

      prepare:{
        //检查状态
        ready:false,
        readyCount:0,
        readyNeed:5,

        //数据加载子项
        tops:false,//管理员信息
        model:false,//模块入口信息
        page:false,//页面权限
        menu:false,//菜单权限
        custom:false,//私人数据，缓存，自定义配置等
      }
    }
  },
  methods: {
    login() {
      this.$http.post_core("/core/login", {
        username: this.username,
        password: this.password,
      }, res => {
        //设置缓存数据
        this.$ezstore.auth.setToken(res.data.account.token)
        this.$ezstore.auth.setIsLogin(true)
        this.$ezstore.auth.setUser(res.data.account)

        //跳转地址
        // this.redirect = res.data.redirect
        this.redirect = "/v1/welcome"
        //设置token缓存
        localStorage.setItem(this.$http.authKey, res.data.account.token)

        this.showLogin = false
        this.getUserModel()
        this.getUserTops()
        this.getUserPage()
        this.getUserMenus()
        this.getUserCustom()
      })
    },
    toggle(){
      this.showLogin = !this.showLogin
    },
    getUserModel(){
      this.$http.post_core("/core/admin/Model/my",{},res=>{
        this.$ezstore.auth.setModels(res.data)
        this.prepare.model = true
        this.prepare.readyCount++
        this.checkReady()
      })
    },
    getUserTops(){
      this.$http.post_core("/core/admin/Top/my",{},res=>{
        this.$ezstore.auth.setTops(res.data)
        this.prepare.tops = true
        this.prepare.readyCount++
        this.checkReady()
      })
    },
    getUserMenus(){
      this.$http.post_core("/core/admin/Menu/my",{},res=>{
        this.$ezstore.auth.setMenus(res.data)
        this.prepare.menu = true
        this.prepare.readyCount++
        this.checkReady()
      })
    },
    getUserPage(){
      this.$http.post_core("/core/admin/Page/my",{},res=>{
        this.$ezstore.auth.setPages(res.data)
        this.prepare.page = true
        this.prepare.readyCount++
        this.checkReady()
      })
    },
    getUserCustom(){
      setTimeout(()=>{
        this.prepare.custom = true
        this.prepare.readyCount++
        this.checkReady()
      },1700)
    },
    checkReady(){
      if (this.prepare.readyCount === this.prepare.readyNeed){
        this.$toast.success("数据准备完毕！")
        //跳转到首页
        setTimeout(()=>{
          this.$router.replace(this.redirect)
        },1000)
      }
    }
  }
}
</script>

<style scoped>
.login{
  background-color: rgba(0,0,0,.6);
}
.login .background{
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/bg.jpg");
  background-size:  100% 100%;
  z-index: 0;
  opacity: 0.8;
}
.login .show{
  opacity: 1;
  transform: scale(1,1);
}
.login .hide{
  opacity: 0.1;
  transform: scale(0,0);
  overflow: hidden;
}
.login .trans{
  transition: opacity,transform;
  transition-duration: 0.3s;
}
.login .loading {
  transition-delay: .2s;
}

</style>